/
<template>
    <div class="mesboardList">
        <h2>推荐阅读</h2>
        <div class="containe">
            <div class="left">
                <div class="mesboardLists">
                    <div
                        v-for="item in list"
                        :key="item.id"
                        @click="headleArticleId(item.id)"
                    >
                        <MesboardListItem :item="item" />
                    </div>
                </div>
            </div>
        </div>
        <BackTop />
    </div>
</template>

<script>
import BackTop from '../BackTop.vue';
import MesboardListItem from './MesboardListItem.vue';
export default {
    components: {
        BackTop,
        MesboardListItem,
    },
    props: ['list'],
    methods: {
        headleArticleId(info) {
            this.$router.push(`/archives/detail/${info}`);
        },
    },
};
</script>

<style scoped lang="scss">
h2 {
    font-size: 16px;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    background: var(--bg-body);
}

.left {
    width: 100% !important;
}
.mesboardList {
    background: var(--bg);
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    text-align: left;
    .item:hover h3 {
        color: #ff0064;
    }
    .item {
        display: flex;
        padding: 10px 10px;
        padding-bottom: 30px;
        flex-direction: column;
        text-align: left;
    }
}
@media (max-width: 768px) {
    .mesboardList {
        width: 95%;
        margin:0 auto !important;
    }
}

@media (min-width: 768px) {
    .mesboardList {
        width: 768px;
    }
}
@media (min-width: 992px) {
    .mesboardList {
        width: 800px;
    }
}

@media (min-width: 1200px) {
    .mesboardList {
        width: 900px;
    }
}
</style>
